<template>
<!--  最大的div-->
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input type="text" v-model="userName" placeholder="姓名" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-input type="text" v-model="userNum" placeholder="工号" clearable/>
        </el-col>
        <el-col :span="4">
          <el-button @click="searchUserFun" size="small" type="primary">查询</el-button>
          <el-button size="small" v-if="userAuth === 'admin'" @click="addDialog = true" type="primary">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="title">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          width="80"/>
        <el-table-column
          prop="userName"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userPass"
          label="密码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userNum"
          label="工号">
        </el-table-column>
        <el-table-column
          prop="auth"
          label="角色">
          <template slot-scope="scope">
            <span>{{scope.row.auth === "admin" ? "管理员" : "用户"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
         <template slot-scope="scope">
            <el-button @click="delUserById(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="openDialog(scope.row.id,scope.row.auth)">权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-sizes="[10,20,30]"
        :page-size="pageSize"
        :current-page="pageNo"
        @current-change  = "pageClick">
      </el-pagination>
    </div>
    <div class="dialog">
      <el-dialog
        title="权限修改"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <el-radio-group v-model="authVal" >
        <el-radio label="admin">管理员</el-radio>
        <el-radio label="normal">用户</el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserInfo">确 定</el-button>
        </span>
      </el-dialog>

<!--      新增的dialog-->
      <el-dialog
        title="添加用户"
        :visible.sync="addDialog"
        :before-close="clearForm"
        width="50%">
        <el-form :model="diaForm" :rules="rules" ref="diaForm">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="diaForm.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPass">
            <el-input v-model="diaForm.userPass"/>
          </el-form-item>
          <el-form-item label="工号" prop="userNum">
            <el-input v-model="diaForm.userNum"/>
          </el-form-item>
          <el-form-item label="权限" prop="auth">

            <el-radio v-model="diaForm.auth" label="admin" border>管理员</el-radio>
            <el-radio v-model="diaForm.auth" label="normal" border>用户</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clearForm">取 消</el-button>
          <el-button type="primary" @click="dialogRules('diaForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {searchUser,delUser,updateUserAuth,insertUser,addUserLog} from "../api/api";

export default {
  name: "userInfo",
  data() {
    return {
      tableData:[],
      userAuth:"",
      userName:"",
      loginUser:"",
      userNum:"",
      total:1,
      pageNo:1,
      pageSize:10,
      authVal:"",
      dialogVisible: false,
      id:0,
      diaForm:{
        userName:"",
        userPass:"",
        userNum:"",
        auth:""
      },
      rules: {
        userName: [
          {required:true,message:"请输入用户姓名",trigger:"blur"}
        ],
        userPass: [
          {required:true,message:"请输入初始密码",trigger:"blur"}
        ],
        userNum: [
          {required:true,message:"请输入用户工号",trigger:"blur"}
        ],
        auth: [
          {required:true,message:"请选择角色权限",trigger:"blur"}
        ]
      },
      addDialog:false
    }
  },
  created() {
    this.searchUserFun();
    this.getUserAuth();
  },
  methods: {
    async searchUserFun(){
      let param = {
        userName:this.userName,
        userNum: this.userNum,
        pageSize: this.pageSize,
        pageNo:this.pageNo
      }
      let userInfo = await searchUser(param);
      this.tableData = userInfo.detailData.records;
      this.total = userInfo.detailData.total;
    },
    async pageClick(val){
      let param = {
        userName:this.userName,
        userNum: this.userNum,
        pageSize: this.pageSize,
        pageNo:val
      }
      let userInfo = await searchUser(param);
      this.tableData = userInfo.detailData.records;
    },
    async delUserById(val){
      let param = {id: val.id}
      var message = "删除一个用户，用户信息为"+val.toString();
      await this.insertUserLog(message);
      await delUser(param);
      await this.searchUserFun();
    },
    openDialog(id,auth){
      this.authVal = auth;
      this.id = id;
      this.dialogVisible = true;
    },
    async updateUserInfo(){
      let  param = {
        id: this.id,
        auth:this.authVal
      }
      await updateUserAuth(param);
      var message = "修改用户ID为"+this.id + "的权限为"+(this.authVal=== 'admin'? "管理员":"用户");
      await this.insertUserLog(message)
      this.dialogVisible = false;
      await this.searchUserFun();
    },

    dialogRules(formData){
      this.$refs[formData].validate((vaid) =>{
        if (vaid) {
          var promise = this.addNewUser()+"";
            this.searchUserFun();
            this.addDialog = false;
        }
      })

    },
     addNewUser(){
      var newVar =  insertUser(this.diaForm);
      var message = "新增一个用户，详细信息为"+JSON.stringify(this.diaForm);
      this.insertUserLog(message)
      return newVar.code;
    },
    clearForm(){
      for (let diaFormKey in this.diaForm) {
        this.diaForm[diaFormKey] = "";
      }
      this.addDialog = false;
    },
    getUserAuth(){
      var item = window.localStorage.getItem("userAuth")
      this.userAuth = item;
      this.loginUser = window.localStorage.getItem("userName");
    },
    async insertUserLog(val){
      let param = {
        userName: this.loginUser,
        message: val
      }
      await addUserLog(param);
    }
  },
};
</script>

<style scoped>

</style>